<template>
    <div class="container-userauth">
        <a-modal width="1100px" :visible="visible" title="审核详情" @cancel="closeModal" class="yuan-modal userauth-modal"
            :dialog-style="{ top: '20px' }">
            <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
                :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules">
                <div class="form-title">人物信息</div>
                <div class="form-panel yuan-form-col3">
                    <a-form-model-item class="yuan-form-row" label="角色权限">
                        <a-radio-group v-model="formData.roleName">
                            <a-radio value="需求方">需求方</a-radio>
                            <a-radio value="成果方">成果方</a-radio>
                            <a-radio value="中介方">中介方</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="角色身份">
                        <a-radio-group v-model="formData.userType" @change="userTypeChange">
                            <a-radio value="个人">个人</a-radio>
                            <a-radio value="企业/单位">企业/单位</a-radio>
                            <a-radio value="专家">专家</a-radio>
                            <a-radio value="专家团队">专家团队</a-radio>
                        </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item class="yuan-form-item" label="手机号" prop="phone">
                        <span class="yuan-form-input">{{formData.phone}}</span>
                    </a-form-model-item>

                    <!----------- 个人 --------->
                    <template v-if="formData.userType==='个人'">
                        <a-form-model-item class="yuan-form-item" label="姓名" prop="name">
                            <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入姓名"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="性别" prop="gender">
                            <a-radio-group class="yuan-form-input" v-model="formData.gender">
                                <a-radio value="男">男</a-radio>
                                <a-radio value="女">女</a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                        <div class="clear-both"></div>
                        <a-form-model-item class="yuan-form-item" label="所在企业" prop="placeEnterprise">
                            <a-input class="yuan-form-input" v-model="formData.placeEnterprise" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="身份证号" prop="identityCard">
                            <a-input class="yuan-form-input" v-model="formData.identityCard" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <div class="clear-both"></div>
                        <a-form-model-item label="上传头像" class="yuan-form-item" v-if="pageReady">
                            <UploadVue :uploadLength="1" @uploadChange="uploadChangeHead"
                                :defImgList="formData.headPortrait?[formData.headPortrait]:[]" />
                            <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                        </a-form-model-item>

                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="简介" prop="briefIntroduction">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.briefIntroduction" placeholder="请输入个人简介" :maxLength="500" />
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="所在地区" prop="placeAreaCode">
                            <a-cascader class="yuan-form-input" v-model="formData.placeAreaCode" :options="addrData"
                                placeholder="请选择" @change="onAddrChange" />
                        </a-form-model-item>
                    </template>

                    <!----------- 企业 -------------->
                    <template v-else-if="formData.userType==='企业/单位'">
                        <a-form-model-item class="yuan-form-item" label="企业/单位名称" prop="name">
                            <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入企业/单位名称"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="成立日期" prop="dateOfEstablishment">
                            <a-date-picker class="yuan-form-input" placeholder="成立日期" v-model="formData.dateOfEstablishment"
                                inputReadOnly valueFormat="YYYY-MM-DD" />
                        </a-form-model-item>
                        <div class="clear-both"></div>
                        <a-form-model-item class="yuan-form-item" label="信用代码" prop="creditCode">
                            <a-input class="yuan-form-input" v-model="formData.creditCode" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="法定代表人" prop="legalRepresentative">
                            <a-input class="yuan-form-input" v-model="formData.legalRepresentative" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <div class="clear-both"></div>
                        <a-form-model-item label="上传头像" class="yuan-form-item" v-if="pageReady">
                            <UploadVue :uploadLength="1" @uploadChange="uploadChangeHead"
                                :defImgList="formData.headPortrait?[formData.headPortrait]:[]" />
                            <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                        </a-form-model-item>
                        <a-form-model-item label="营业执照" class="yuan-form-item" v-if="pageReady" prop="businessLicense">
                            <UploadVue :uploadLength="1" @uploadChange="uploadChangeBusinessLicense"
                                :defImgList="formData.businessLicense?[formData.businessLicense]:[]" />
                            <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="所在地区" prop="placeAreaCode">
                            <a-cascader class="yuan-form-input" v-model="formData.placeAreaCode" :options="addrData"
                                placeholder="请选择" @change="onAddrChange" />
                        </a-form-model-item>
                    </template>
                    <!----------- 专家 --------->
                    <template v-if="formData.userType==='专家'">
                        <a-form-model-item class="yuan-form-item" label="姓名" prop="name">
                            <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入姓名"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="性别" prop="gender">
                            <a-radio-group class="yuan-form-input" v-model="formData.gender">
                                <a-radio value="男">男</a-radio>
                                <a-radio value="女">女</a-radio>

                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="邮箱" prop="email">
                            <a-input class="yuan-form-input" v-model="formData.email" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-radio" label="所属学院" prop="placeCollege">
                            <a-checkbox-group v-model="formData.placeCollege">
                                <a-checkbox :value="item.content" v-for="item in placeCollegeList"
                                    :key="'c_'+item.content">{{item.content}}</a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>

                        <a-form-model-item class="yuan-form-radio" style="width:90%" label="领域" prop="territory">
                            <a-checkbox-group v-model="formData.territory">
                                <a-checkbox :value="item.content" v-for="item in territoryList"
                                    :key="item.id">{{item.content}}</a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                        <div class="clear-both"></div>
                        <a-form-model-item label="上传头像" class="yuan-form-item" v-if="pageReady">
                            <UploadVue :uploadLength="1" @uploadChange="uploadChangeHead"
                                :defImgList="formData.headPortrait?[formData.headPortrait]:[]" />
                            <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                        </a-form-model-item>

                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="简介" prop="briefIntroduction">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.briefIntroduction" placeholder="请输入个人简介" :maxLength="500" />
                        </a-form-model-item>
                        <a-form-model-item label="相关图片" class="yuan-form-row" v-if="pageReady">
                            <UploadVue :uploadLength="3" @uploadChange="uploadChangeCorrelationPicture"
                                :defImgList="formData.correlationPicture?formData.correlationPicture:[]" />
                            <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="难点突破" prop="difficultyBreakThrough">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.difficultyBreakThrough" placeholder="请输入难点突破" :maxLength="500" />
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="核心技术" prop="coreTechnology">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.coreTechnology" placeholder="请输入核心技术" :maxLength="500" />
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="推广应用" prop="promotionUse">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.promotionUse" placeholder="请输入推广应用" :maxLength="500" />
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="前期成果" prop="earlierStageAchievement">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.earlierStageAchievement" placeholder="请输入前期成果" :maxLength="500" />
                        </a-form-model-item>
                    </template>

                    <!----------- 专家团队 --------->
                    <template v-if="formData.userType==='专家团队'">
                        <a-form-model-item class="yuan-form-item" label="团队名称" prop="name">
                            <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入姓名"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="团队负责人" prop="teamPrincipal">
                            <a-input class="yuan-form-input" v-model="formData.teamPrincipal" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-item" label="联系方式" prop="contactWay">
                            <a-input class="yuan-form-input" v-model="formData.contactWay" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <div class="clear-both"></div>
                        <a-form-model-item class="yuan-form-item" label="邮箱" prop="email">
                            <a-input class="yuan-form-input" v-model="formData.email" placeholder="请输入"></a-input>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-radio" label="所属学院" prop="placeCollege">
                            <a-checkbox-group v-model="formData.placeCollege">
                                <a-checkbox :value="item.content" v-for="item in placeCollegeList"
                                    :key="'c_'+item.content">{{item.content}}</a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                        <a-form-model-item class="yuan-form-radio" style="width:90%" label="领域" prop="territory">
                            <a-checkbox-group v-model="formData.territory">
                                <a-checkbox :value="item.content" v-for="item in territoryList"
                                    :key="item.id">{{item.content}}</a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="团队负责人简介" prop="briefIntroduction">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.briefIntroduction" placeholder="请输入团队负责人简介" :maxLength="500" />
                        </a-form-model-item>
                        <a-form-model-item label="相关图片" class="yuan-form-row" v-if="pageReady">
                            <UploadVue :uploadLength="3" @uploadChange="uploadChangeCorrelationPicture"
                                :defImgList="formData.correlationPicture?formData.correlationPicture:[]" />
                            <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                        </a-form-model-item>

                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="难点突破" prop="difficultyBreakThrough">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.difficultyBreakThrough" placeholder="请输入难点突破" :maxLength="500" />
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="核心技术" prop="coreTechnology">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.coreTechnology" placeholder="请输入核心技术" :maxLength="500" />
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="推广应用" prop="promotionUse">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.promotionUse" placeholder="请输入推广应用" :maxLength="500" />
                        </a-form-model-item>
                        <div class="clear-both" style="margin-top:10px"></div>
                        <a-form-model-item class="yuan-form-row" label="前期成果" prop="earlierStageAchievement">
                            <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                v-model="formData.earlierStageAchievement" placeholder="请输入前期成果" :maxLength="500" />
                        </a-form-model-item>

                    </template>

                </div>
                <template v-if="formData.auditTechnicalState!==null">
                    <div class="form-title">技术经纪人</div>
                    <div class="form-panel">

                        <BrokerVue ref="brokerVue" :detailInfo="formData" v-if="visible && formData.id" />

                    </div>
                </template>

            </a-form-model>
            <template slot="footer">
                <template v-if="!isShow">
                    <a-button @click="pass" type="primary" :loading="loading">
                        通过审核
                    </a-button>
                    <a-button @click="clickRefuse" type="danger">
                        驳回
                    </a-button>
                </template>

                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>

        <a-modal width="600px" title="拒绝原因" :visible="refuseVisible" @ok="refuseOk" @cancel="refuseCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="refuseLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="拒绝原因" prop="number">
                            <a-input type="textarea" style="width: 500px;" :rows="5" placeholder="请输入拒绝原因" :maxLength="500" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
        <PreviewImageVue :imgList="imageUrls" @close="previewVisible=false" :previewVisible="previewVisible" />
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import PreviewImageVue from "@/components/previewImage.vue";
import BrokerVue from "./components/authBroker.vue";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";
import areaJson, { getAreaWords } from "@/utils/area";
@Component({
    name: "dom",
    components: { PreviewImageVue, BrokerVue, UploadVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: false }) isTechnical!: boolean;
    @Prop({ default: {} }) detailInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getDetailInfo();
        } else {
            this.formData = {};
            this.pageReady = false;
        }
    }
    pageReady = false;
    formData: any = {};
    loading = false;
    async mounted() {
        this.getSetting();
        this.getPlaceCollegeList();
        this.setAddrData();
    }
    async getDetailInfo() {
        this.loading = true;
        try {
            const res = await api.getAccountDetail(this.detailInfo.id);
            const placeCity = JSON.parse(res.data.placeCity || "{}");
            if (placeCity && placeCity.provinceCode) {
                res.data.placeAreaCode = [placeCity.provinceCode, placeCity.cityCode, placeCity.districtCode];
            } else {
                res.data.placeAreaCode = [];
            }
            this.formData = {
                ...res.data,
                placeCity:placeCity,
                placeCollege: JSON.parse(res.data.placeCollege || "[]"),
                territory: JSON.parse(res.data.territory || "[]"),
                correlationPicture: JSON.parse(res.data.correlationPicture || "[]"),
                certificate: JSON.parse(res.data.certificate || "[]"),
                practitionerCase: JSON.parse(res.data.practitionerCase || "[]"),
                skillCorrelationPicture: JSON.parse(res.data.skillCorrelationPicture || "[]"),
            };
            this.pageReady = true;
            this.userTypeChange();
        } finally {
            this.loading = false;
        }
    }
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
            this.$emit("sureClose");
        } finally {
            this.loading = false;
        }
    }
    refuseLoading = false;
    refuseVisible = false;
    clickRefuse() {
        this.$confirm({
            title: "确定要驳回吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                const data: any = {
                    id: this.detailInfo.id,
                    state: this.isTechnical ? 1 : 2,
                };

                if (this.isTechnical) {
                    data.auditTechnicalState = 2;
                } else if (this.detailInfo.hasTechnicalRepresentative === 0) {
                    data.auditTechnicalState = 2;
                }
                const res = await api.setUserAuth(data);
                this.$message.success(res.msg);
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
        //this.refuseVisible = true;
    }
    refuseOk() {}
    refuseCancel() {
        this.refuseVisible = false;
    }
    pass() {
        this.$confirm({
            title: "确定要通过吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                let brokerInfo = {};
                if (this.formData.auditTechnicalState !== null) {
                    brokerInfo = (this.$refs.brokerVue as any).getInfo();
                    if (brokerInfo === false) return;
                }

                const data: any = {
                    ...this.formData,
                    ...brokerInfo,
                    id: this.detailInfo.id,
                    state: 1,
                };

                if (this.isTechnical) {
                    //技术经纪人审核
                    data.auditTechnicalState = 1;
                } else if (this.detailInfo.hasTechnicalRepresentative === 0) {
                    //人员注册审核
                    data.auditTechnicalState = 1;
                }

                const res = await api.setUserAuth(data);
                this.$message.success(res.msg);
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }

    previewVisible = false;
    imageUrls: string[] = [];
    imgClick(url: string) {
        this.previewVisible = true;
        this.imageUrls = [url];
    }
    closeImg() {
        this.previewVisible = false;
    }

    defRules = {
        phone: [{ required: true, message: "请输入手机号", trigger: "change" }],
    };
    rules = {};
    userTypeChange() {
        (this.$refs.form as any)?.clearValidate();
        const rulesObj = {
            个人: {
                name: [{ required: true, message: "请输入姓名", trigger: "change" }],
                gender: [{ required: true, message: "请选择性别", trigger: "change" }],
                placeAreaCode: [{ required: true, message: "请选择所在城市", trigger: "change" }],
            },
            "企业/单位": {
                name: [{ required: true, message: "请输入企业/单位名", trigger: "change" }],
                dateOfEstablishment: [{ required: true, message: "请选择成立日期", trigger: "change" }],
                creditCode: [{ required: true, message: "请输入信用代码", trigger: "change" }],
                legalRepresentative: [{ required: true, message: "请输入法定代表人", trigger: "change" }],
                businessLicense: [{ required: true, message: "请上传营业执照", trigger: "change" }],
                placeAreaCode: [{ required: true, message: "请选择所在城市", trigger: "change" }],
            },
            专家: {
                name: [{ required: true, message: "请输入姓名", trigger: "change" }],
                gender: [{ required: true, message: "请选择性别", trigger: "change" }],
                placeCollege: [{ required: true, message: "请输入所属学院", trigger: "change" }],
                territory: [{ required: true, message: "请选择领域", trigger: "change" }],
                difficultyBreakThrough: [{ required: true, message: "请输入难点突破", trigger: "change" }],
                coreTechnology: [{ required: true, message: "请输入核心技术", trigger: "change" }],
                promotionUse: [{ required: true, message: "请输入推广应用", trigger: "change" }],
            },
            专家团队: {
                name: [{ required: true, message: "请输入团队名称", trigger: "change" }],
                placeCollege: [{ required: true, message: "请输入所属学院", trigger: "change" }],
                territory: [{ required: true, message: "请选择领域", trigger: "change" }],
                briefIntroduction: [{ required: true, message: "请输入团队负责人简介", trigger: "change" }],
                difficultyBreakThrough: [{ required: true, message: "请输入难点突破", trigger: "change" }],
                coreTechnology: [{ required: true, message: "请输入核心技术", trigger: "change" }],
                promotionUse: [{ required: true, message: "请输入推广应用", trigger: "change" }],
            },
        };
        this.rules = {
            ...this.defRules,
            ...rulesObj[this.formData.userType],
        };
    }
    addrData: any[] = [];
    setAddrData() {
        this.addrData = areaJson;
    }
    onAddrChange(e: any) {
        this.formData.placeCity = getAreaWords(e);
    }

    territoryList = [];
    async getSetting() {
        try {
            this.loading = true;
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            this.loading = false;
        }
    }
    placeCollegeList = [];
    async getPlaceCollegeList() {
        try {
            this.loading = true;
            const res = await api.getSetting("1");
            this.placeCollegeList = res.data;
        } finally {
            this.loading = false;
        }
    }

    uploadChangeHead(e) {
        this.formData.headPortrait = e.length ? e[0].url : "";
    }
    uploadChangeBusinessLicense(e) {
        this.formData.businessLicense = e.length ? e[0].url : "";
    }
    uploadChangeCorrelationPicture(e) {
        this.formData.correlationPicture = e.map((item) => item.url);
    }
}
</script>

<style lang="scss">
.userauth-modal {
    .imagePreBox {
        width: 120px;
        height: 120px;
        border: solid 1px #eee;
        display: inline-flex;
        margin-right: 5px;
        align-items: center;
        justify-content: center;
    }
    .imagePreview {
        max-width: 100%;
        max-height: 100%;
    }
}
</style>
